<template>
    <div class="order-content">
            <div class="title">
              <h3>我的订单</h3>
            </div>
            <div class="chosetype">
              <table>
                <thead>
                  <tr>
                    <th width="29%">商品</th>
                    <th width="31%">订单详情</th>
                    <th width="13%">收货人</th>
                    <th>金额</th>
                    <th>状态</th>
                    <th>操作</th>
                  </tr>
                </thead>
              </table>
            </div>
            <div class="orders">

              <table class="order-item" v-for='order in orderList' :key='order.id'>
                <thead>
                  <tr>
                    <th colspan="5">
                      <span class="ordertitle">{{order.createTime}}　订单编号：{{order.outTradeNo}} <span
                          class="pull-right delete"><img src="./images/delete.png"></span></span>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for='(goods,index) in order.orderDetailList' :key='goods.id'>
                    <td width="60%">
                      <div class="typographic">
                        <img :src="goods.imgUrl" width='70'>
                        <a href="javascript:;" class="block-text">{{goods.skuName}}</a>
                        <span>x{{goods.skuNum}}</span>
                        <a href="javascript:;" class="service">售后申请</a>
                      </div>
                    </td>
                    <td :rowspan="order.orderDetailList.length" width="8%" class="center" v-show='index===0'>{{order.consignee}}</td>
                    <td :rowspan="order.orderDetailList.length" width="13%" class="center" v-show='index===0'>
                      <ul class="unstyled">
                        <li>总金额¥{{goods.orderPrice}}</li>
                        <li>在线支付</li>

                      </ul>
                    </td>
                    <td :rowspan="order.orderDetailList.length" width="8%" class="center" v-show='index===0'>
                      <a href="javascript:;" class="btn">已完成 </a>
                    </td>
                    <td :rowspan="order.orderDetailList.length" width="13%" class="center" v-show='index===0'>
                      <ul class="unstyled">
                        <li>
                          <a href="mycomment.html" target="_blank">评价|晒单</a>
                        </li>
                      </ul>
                    </td>
                  </tr>
                
                </tbody>
              </table>
            </div>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                style="text-align: center"
                :background="true"
                :current-page="page"
                :page-sizes="[1,3, 5, 7, 9]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
          </div>
</template>

<script>
import {mapActions,mapState} from 'vuex'
export default {
  components: {},
  data() {
    return {
      page:1,
      limit:3,
      total:0
    }
  },
  computed: {
      ...mapState({
          orderList:state=>state.center.orderList
      }),
  },
  methods: {
      ...mapActions(['getOrderList']),
      async getList(){
          const {code,data}=await this.getOrderList({page:this.page,limit:this.limit})
          if(code===200){
              this.total=data.total
          }
      },
      async handleSizeChange(val) {
           this.limit=val;
          await this.getList()
        // console.log(`每页 ${val} 条`);
      },
      async handleCurrentChange(pageCurrent) {
          this.page=pageCurrent
          await this.getList()
        // console.log(`当前页: ${val}`);
      }
  },
  async mounted() {
     await this.getList()
  }
};
</script>
<style scoped lang='less'>
     //订单部分
          .order-content {
            margin: 0 20px;
            color: #666;

            //标题
            .title {
              margin-bottom: 22px;
              border: 1px solid #ddd;

              h3 {
                padding: 12px 10px;
                font-size: 15px;
                background-color: #f1f1f1;

              }
            }

            //表头
            .chosetype {
              margin-bottom: 15px;
              color: #666;

              table {
                border: 1px solid #e6e6e6;
                border-collapse: separate;
                border-radius: 2px;
                width: 100%;
                max-width: 100%;
                border-spacing: 0;

                th {
                  padding: 6px 8px;
                  color: #666;
                  font-weight: 700;
                  vertical-align: bottom;
                  background-color: #f4f4f4;
                  line-height: 18px;
                  border-bottom: 1px solid #e6e6e6;
                  font-size: 12px;
                  text-align: left;
                }
              }
            }

            // 表单内容
            .orders {
              font-size: 12px;

              a {
                &:hover {
                  color: #4cb9fc;
                }
              }

              table {
                border: 1px solid #e6e6e6;
                border-collapse: collapse;
                border-radius: 2px;
                width: 100%;
                margin-bottom: 18px;
                max-width: 100%;

                th {
                  padding: 6px 8px;
                  line-height: 18px;
                  text-align: left;
                  vertical-align: bottom;
                  background-color: #f4f4f4;
                  font-size: 12px;
                  color: #666;

                  .pull-right {
                    float: right;
                    cursor: pointer;

                    img {
                      margin-right: 10px;
                      vertical-align: middle;
                    }
                  }
                }

                td {
                  font-size: 12px;
                  color: #666;
                  padding: 6px 8px;
                  line-height: 18px;
                  text-align: left;
                  vertical-align: middle;
                  border: 1px solid #e6e6e6;

                  &.center {
                    text-align: center;
                  }

                  .typographic {
                    img {
                      float: left;
                      margin-right: 10px;
                    }

                    a {
                      float: left;
                      min-width: 80px;
                      max-width: 250px;
                      color: #e1251b;

                      &.service {
                        color: #666;
                      }
                    }

                    span {
                      float: left;
                      min-width: 80px;
                      max-width: 250px;
                      text-align: center;
                    }

                  }
                }

              }
            }

            // 分页

          }
</style>